<template>
	<div class="xitongpeizhi">
    <left></left>
    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>
        <top></top>
      </div>
      <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
        <!-- 1 -->
        <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
          <div><img src="../../../static/img/xitong1.png" style="width: 22px; margin-right: 10px;"></div>
          <div>账号信息设置</div>
        </div>
        <div style=" width: 780px; height: 100px; background: #fff; border-radius: 20px; padding: 20px; margin-bottom: 20px;">
          <div>账号名称</div>
          <div>FUFIJDJFPF</div>
        </div>
        <div class="flex" style="margin-bottom: 20px;">
          <div style="width: 240px; height: 100px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 20px;">
            <div class="flexbc">
              <div style="color: rgb(120, 125, 133); font-size: 14px;">姓名</div>
              <div class="flexcc xiugai">修改</div>
            </div>
            <div style="color: rgb(2, 12, 29);">张三李四</div>
          </div>
          <div style=" width: 240px; height: 100px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 20px;">
            <div class="flexbc">
              <div style="color: rgb(120, 125, 133); font-size: 14px;">姓名</div>
              <div class="flexcc xiugai">修改</div>
            </div>
            <div style="color: rgb(2, 12, 29);">张三李四</div>
          </div>
          <div style=" width: 240px; height: 100px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 20px;">
            <div class="flexbc">
              <div style="color: rgb(120, 125, 133); font-size: 14px;">姓名</div>
              <div class="flexcc xiugai">修改</div>
            </div>
            <div style="color: rgb(2, 12, 29);">张三李四</div>
          </div>
        </div>
        <div class="flex" style="margin-bottom: 20px;">
          <div style="width: 240px; height: 100px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 20px;">
            <div class="flexbc">
              <div style="color: rgb(120, 125, 133); font-size: 14px;">姓名</div>
              <div class="flexcc xiugai">修改</div>
            </div>
            <div style="color: rgb(2, 12, 29);">张三李四</div>
          </div>
        </div>
        <!-- 2 -->
        <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 90px;">
          <div><img src="../../../static/img/xitong2.png" style="width: 22px; margin-right: 10px;"></div>
          <div>修改登录密码</div>
        </div>
        <div class="flexc" style="width: 320px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 20px;">
          <div class="flexbc t" style="background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 25px; width: 280px; overflow: hidden; margin-bottom: 20px;">
            <div class="flexcc" style="width: 50px;"><img src="../../../static/img/psd.png" style="width: 15px; height: 15px;"></div>
            <div><el-input v-model="all.name" style="width: 220px;" placeholder="请输入手机号"></el-input></div>
          </div>
          <div class="flexbc" style=" margin-bottom: 20px; width: 320px;">
            <div class="flexbc tt" style="background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 25px; width: 180px; overflow: hidden;">
              <div><el-input v-model="all.name" style="width: 180px;" placeholder="请输入手机号"></el-input></div>
            </div>
            <div style="width: 80px; font-size: 12px; color: rgb(0, 90, 255);">获取验证码</div>
          </div>

          <div class="flexbc t" style="background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 25px; width: 280px;  overflow: hidden; margin-bottom: 20px;">
            <div class="flexcc" style="width: 50px;"><img src="../../../static/img/psd.png" style="width: 15px; height: 15px;"></div>
            <div><el-input v-model="all.name" style="width: 220px;" placeholder="请输入新密码"></el-input></div>
          </div>
          <div class="flexbc t" style="background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 25px; width: 280px;  overflow: hidden; margin-bottom: 20px;">
            <div class="flexcc" style="width: 50px;"><img src="../../../static/img/psd.png" style="width: 15px; height: 15px;"></div>
            <div><el-input v-model="all.name" style="width: 220px;" placeholder="请输入确认密码"></el-input></div>
          </div>
        </div>
		<!-- <footers></footers> -->
      </div>
    </div>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
	export default {
		name: 'xitongpeizhi',
    components:{
      left,top,footers
    },
		data() {
			return {
        all:{}
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {

		}
	}
</script>


<style scoped lang="less">
  .xitongpeizhi{
    .xiugai{background: rgb(228, 237, 255); border-radius: 14px; height: 28px; width: 52px; color: rgb(0, 90, 255); font-size: 12px;}
    /deep/ .t .el-input__inner{ border: 0 !important; padding: 0 !important; height: 50px !important; line-height: 50px !important;}
    /deep/ .tt .el-input__inner{ border: 0 !important;  height: 50px !important; line-height: 50px !important;}
  }
</style>
